<template>
	<view>
		<view class="top_bg ">
			<uNavbar title="道具列表" :bgColor="backgroundColor" ></uNavbar>
			<view class="search flex_dq">
				<view class="search_l flex_c" @click="isSwitch = true">
					<text>{{values}}</text>
					<image src="../../static/icon/i_xial.png" mode=""></image>
				</view>
				<view class="search_c flex_dq">
					<image src="../../static/icon/i_ss.png" mode=""></image>
					<input type="text" placeholder="输入藏品名称" v-model.trim="search"  @confirm="confirmSearch" />
				</view>
				<text @click="confirmSearch">搜索</text>
				<view class="shuaixuan flex_Z" v-show="isSwitch">
					<text v-for="(item,index) in downList" :key="item.id" @click="isSelect(item)">{{item.name}}</text>
				</view>
			</view>

		</view>
		<view class="empty2"></view>
		<!-- #ifdef APP -->
			<view class="empty2"></view>
		<!-- #endif -->

		<!-- 自由市场 -->
		<view class="commodity_box flex_Z">
			<view class="commodity ">
				<view class="commodity_sell flex_Z" v-for="(item,index) in productList" :key="index"   @click="goDetails(item.id,item.goods_id)">
					<image :src="item.img" mode="aspectFill"></image>
					<text>道具名称</text>
					<view class="prop_box flex_dq">
						<image src="../../static/image/logo.png" mode="aspectFill"></image>
						<text>盛世大唐</text>
					</view>
					<view class="sign_box flex_ld">
						<view class="sign flex_dq">
							<view class="sign_l  flex_c">
								<text>限量</text>
							</view>
							<text>{{item.sotck}}个</text>
						</view>
						<view class="money_a flex_dq">
							<image src="../../static//image/fhyb.png" mode=""></image>
							<!-- <image src="../../static/icon/i_money.png" mode=""></image> -->
							<text>{{item.price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 暂无数据 / 加载更多 -->
		<noDatas :xxxList="productList" :status="status"></noDatas>
	</view>
</template>

<script>
	import {marketGroup} from "../../api/store.js";
	export default {
		data() {
			return {
				search: '',
				page: 1,
				size: 10,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				isSwitch: false,
				values: '最新上架',
				choiceType:'create_time desc', //筛选方式
				backgroundColor: "transparent",
				productList: [],
				downList: [
					{id:1,name:'最新上架',type:'create_time desc'},
					{id:2,name:'价格升序',type:'price asc'},
					{id:3,name:'价格降序',type:'price desc'},
				],
			}
		},
		onLoad() {
			this.initList()
		},
		methods: {
			// 初始化
			initList() {
				let data = {
					brand_id:"",
					keywords:this.search,
					page:this.page,
					size:this.size,
					series_id:'',//系列id
					order_by:this.choiceType, //排序方式
					brand_id:'', //发行方
				};
				marketGroup(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						let list = res.data.data;
						this.productList = this.page == 1 ? list : this.productList.concat(list);
						console.log(this.productList);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			// 搜索
			confirmSearch(){
				this.initList()
			},
			// 下拉选择
			isSelect(e) {
				console.log(e.type);
				this.values = e.name
				this.choiceType = e.type
				this.isSwitch = false
				this.initList()
			},
			// 商品详情
			goDetails(id,goodsId){
				console.log(id);
				uni.navigateTo({
					url:'/pagesMy/mallCenter/propDetails?id=' + id + '&goodsId=' + goodsId
				})
			},
			onPageScroll: function(e) {
				const scrollTop = e.scrollTop; // 获取页面滚动位置
				// 根据滚动位置修改状态栏样式
				if (scrollTop > 100) {
					this.backgroundColor = '#E0DDDA';
				} else {
					this.backgroundColor = 'transparent';
				}
				// console.log("滚动距离为：" + e.scrollTop);
			},
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新');
			let that = this;
			setTimeout(function() {
				that.page = 1,
				that.search = '',
				that.values = '最新上架',
				that.choiceType = 'create_time desc'
				that.productList = [],
				that.initList()
			}, 800);
		},
		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.initList()
			}
		}
	}
</script>
<style>
	page {
		background: #E0DDDA;
	}
</style>
<style scoped>
	.top_bg {
		display: flex;
		align-items: center;
		flex-direction: column;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 300rpx;
		/* background: url(../../static/image/bg3.png); */
		/* background-size: 100% 100%; */
	}


	.search {
		position: relative;
		width: 690rpx;
		height: 68rpx;
		margin: 20rpx auto;
		border: 1rpx solid #FF2CDF;
		border-radius: 40rpx;
	}

	.search>text {
		width: 142rpx;
		height: 68rpx;
		line-height: 68rpx;
		background: linear-gradient(274deg, #0014FF, #8020EF, #FF2CDF);
		border-radius: 40rpx;
		font-size: 30rpx;
		color: #ffffff;
		text-align: center;
		margin-right: -2rpx;
	}

	.search_l {
		width: 24%;
		font-size: 24rpx;
		color: #ffffff;
	}

	.search_l>image {
		width: 24rpx;
		height: 14rpx;
		margin-left: 10rpx;
	}

	.sign {
		font-size: 16rpx;
		background: #322854;
		border-radius: 10rpx;
		color: #DFA1ED;
	}

	.sign>text {
		margin-left: 10rpx;
		margin-right: 20rpx;
	}

	.sign_l {
		color: #ffffff;
		font-size: 16rpx;
		width: 60rpx;
		height: 30rpx;
		padding: 10rpx 0;
		border-radius: 10rpx 0 0 10rpx;
		background: linear-gradient(270deg, rgba(203, 39, 230, 0.8), rgba(18, 22, 253, 0.8));
	}


	.search_c {
		width: 56%;
		border-left: 1rpx solid #E5E5E560;
	}

	.search_c>image {
		width: 32rpx;
		height: 32rpx;
		margin: 0 10rpx;
	}

	.search_c>input {
		color: #ffffff;
		font-size: 24rpx;
	}

	.shuaixuan {
		position: absolute;
		top: 64rpx;
		left: 0;
		width: 24%;
		margin-top: 4rpx;
		z-index: 999;
	}

	.shuaixuan>text {
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #ffffff;
		background: #383366;
		padding-left: 32rpx;
		border-bottom: 1rpx solid #ffffff20;
	}

	.commodity_box {
		width: 92%;
		margin: 50rpx auto 30rpx;
		position: relative;
	}

	.commodity {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		margin-top: 50rpx;
	}

	.commodity {
		z-index: 9;
	}

	.commodity_sell {
		width: 336rpx;
		height: 526rpx;
		background: #B8A185;
		border: 2rpx solid #B8A185;
		border-radius: 20rpx;
		margin: 12rpx 0;
		padding-bottom: 20rpx;
	}

	.commodity_sell>image {
		width: 100%;
		height: 382rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.commodity_sell>text {
		margin: 16rpx;
		color: #ffffff;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical; 
		-webkit-line-clamp:2; 
		overflow:hidden; 
	}
	.prop_box{
		color: #ffffff;
		margin-bottom: 20rpx;
		margin-left: 14rpx;
	}
	.prop_box>image{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}
	

	.money_a {
		color: #ffffff;
		font-size: 32rpx;
		font-family: iconfont;
		margin-right: 12rpx;
	}

	.money_a>image{
		width: 30rpx;
		height: 20rpx;
		margin-right: 10rpx;
	}
	
	
	.sign_box {
		margin: 0 10rpx;
	}
</style>